<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>热词</title>
	<script src="../../components/echarts-4.0.4.min.js"></script>
    <style>
        body,html{
            padding: 0;
            margin: 0;
			background:#0A0F23;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
	<div style="width: 100%;height: 100%;" id="turnover"></div>
</body>
<script>
	var turnover = echarts.init(document.getElementById('turnover'));
        var turnoverData = ['电子信息技术', '生物与新医药技术', '新材料技术', '高技术服务业', '资源与环境技术', '新能源及节能技术', '航空航天技术', '高新技术改造传统产业', '其他'];
        var turnoverNum = [210, 140, 52, 95, 25, 110, 300,56, 12];
        var turnoverTitle = '各领域技术需求情况';
        var turnoverColor = '#88f5a8';
        var barOption = {
            title: {
		        text: turnoverTitle,
		        left: 'center',
		        top:"15%",
		        textStyle: {
		            color: '#fff',
		            fontSize: 22
		        }
		    },
			legend: {
			    left: '0',
			    data: ['次数'],
			    textStyle: {
			        color: '#fff',
			        fontSize:16
			    }
			},
			tooltip: {
			    trigger: 'none',
			    axisPointer: {
			      type: 'shadow',
			    }
			},
			grid: {
			    left: '5%',
			    right: '7%',
			    bottom: '10%',
			    top:'25%',
			    containLabel: true
			},
		    xAxis: {
		        type: 'category',
		        axisLine: {
		            lineStyle: {
		                color: '#fff'
		            }
		        },
		        axisTick: {
		            lineStyle: {
		                color: '#fff'
		            }
		        },
		        axisLabel: {
		            interval: 0,
		            textStyle: {
		                color: '#fff',fontSize:16
		            },
		            rotate: -30,
		            formatter:function(value)  
                               {  
                                    if (value.length>6) {  
                                        return value.substring(0,6)+"...";  
                                    }  
                                    else {  
                                        return value;  
                                    } 
                               } 
		        },
		        splitLine: {
		            show: false
		        },
		        data: turnoverData
		    },
		    yAxis: {
		        type: 'value',
		        axisLine: {
		            lineStyle: {
		                color: '#fff'
		            }
		        },
		        axisTick: {
		            lineStyle: {
		                color: '#fff'
		            }
		        },
		        axisLabel: {
		            interval: 0,
		            textStyle: {
		                color: '#fff',fontSize:16
		            }
		        },
		        splitLine: {
		            show: false
		        }
		    },
		    series: [{
		        data: turnoverNum,
		        type: 'bar',
		         barWidth:20,
		        itemStyle: {
	                normal: {
	                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: '#297bcd'
                        }, {
                            offset: 1,
                            color: '#0de2ff'
                        }])
	                }
	            }
		    }]
		}

        turnover.setOption(barOption);
</script>
</html>